<template>
  <div class="box" :title="value">
    <div class="extraWrap">
      <div class="extra"></div>
    </div>
    <div class="font18">
      {{ value }}
      <span style="font-size: 16px;color: #ffffffdd;">{{ extra }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "headTitle",
  props: {
    value: {
      type: String,
      default: "",
    },
    extra: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 4vh;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  // background: linear-gradient(to right, rgba(3, 101, 170, 1),rgba(3, 101, 170, 0.5), rgba(3, 101, 170, 0.02));

  background-image: url(~@/assets/images/screen/headTitleBk.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  // box-sizing: border-box;
  padding: 0px 16px 16px 3vw;

  .extraWrap {
    position: absolute;
    right: 2vw;
    top: -0.25vh;
    width: auto;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .extra {
      width: 60px;
      height: 10px;
      background-image: url(~@/assets/images/screen/titleExtra.png);
      background-size: 100% 100%;
    }
  }
}

.font18 {
  font-size: 24px;
  font-weight: 1000;
  font-family: AlibabaPuHuiTi;
  width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 1650px) and (max-width: 1820px) {
  .font18 {
    font-size: 22px;
  }
}

@media screen and (max-width: 1650px) {
  .font18 {
    font-size: 18px;
  }
}

@media screen and (max-width: 1420px) {
  .font18 {
    font-size: 16px;
  }
}
</style>
